<template>
  <div style="padding: 10px">
    <el-card>
      <el-form :inline="true" :model="formInline1" class="demo-form-inline">
        <el-form-item :label="$t('用户id')">
          <el-input v-model="formInline1.userId" size="small"></el-input>
        </el-form-item>
        <el-form-item :label="$t('用户名称')">
          <el-input v-model="formInline1.userName" size="small"></el-input>
        </el-form-item>
        <el-form-item :label="$t('状态')">
          <el-select v-model="formInline1.status" size="small">
            <el-option :value="0" :label="$t('无效')"></el-option>
            <el-option :value="1" :label="$t('有效')"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('用户等级')">
          <el-select v-model="formInline1.userGrade" size="small">
            <el-option v-for="item in leveList" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('创建时间')">
          <el-date-picker v-model="formInline1.createTime" :placeholder="$t('选择日期时间')" size="small" type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="onSubmit1">{{ $t('query') }}</el-button>
          <el-button size="small" type="warning" @click="reset1">{{ $t('重置') }}</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card style="margin-top: 10px">
      <el-table size="medium" :header-cell-style="{ fontSize: '14px' }" v-loading="loading" :data="tableData"
        style="width: 100%">
        <el-table-column :label="$t('用户id')" prop="userId" width="70"></el-table-column>
        <el-table-column :label="$t('邮箱')" prop="email"></el-table-column>
        <el-table-column :label="$t('手机号')" prop="phone"></el-table-column>
        <el-table-column :label="$t('账号名称')" prop="userName">
        </el-table-column>
        <el-table-column :label="$t('状态')" prop="status">
          <template #default="{ row }">
            {{ row.status === 0 ? $t("无效") : $t("有效") }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('用户等级')" prop="userGrade">
        </el-table-column>
        <el-table-column :label="$t('直推人数')" prop="groupNumber">
        </el-table-column>
        <el-table-column :label="$t('团队人数')" prop="teamNumber">
        </el-table-column>
        <el-table-column :label="$t('CFP余额')" prop="remainsTotalAmount">
        </el-table-column>
        <el-table-column :label="$t('USDT余额')" prop="usdtAmount">
        </el-table-column>
        <el-table-column :label="$t('总购买流量')" prop="flowPackageTotal">
        </el-table-column>
        <el-table-column :label="$t('未解锁流量')" prop="lockFlowTotal">
        </el-table-column>
        <el-table-column :label="$t('创建时间')" prop="createTime">
        </el-table-column>
        <el-table-column :label="$t('邀请码')" prop="code"></el-table-column>
        <el-table-column :label="$t('推荐人邮箱')" prop="inviteUserName"></el-table-column>
        <el-table-column :label="$t('operation')" fixed="right" style="text-align: center" width="120">
          <template #default="{ row }">
            <el-button style="display: block;" size="small" type="text" @click="topUp(row.userId, row.status)">
              {{ $t("编辑") }}
            </el-button>
            <el-button style="display: block;margin-left: 0;" size="small" type="text" @click="alterLever(row)">
              {{ $t("修改等级") }}
            </el-button>
            <el-button size="small" style="margin-left: 0;display: block;" type="text" @click="reset(row.userId)">
              {{ $t("重置密码") }}
            </el-button>
            <el-button size="small" style="margin-left: 0;display: block;" type="text" @click="chekCfp(row.userId)">
              {{ $t("查看CFP余额") }}
            </el-button>
            <!-- <el-dropdown @command="handleCommand($event, row.userId)">
              <span class="el-dropdown-link">
                {{ $t("更多")}}
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="a"><span style="font-size: 12px">{{ $t("查看CFP明细") }}</span>
                </el-dropdown-item>
                <el-dropdown-item command="b"><span style="font-size: 12px">{{ $t("查看流量明细") }}</span>
                </el-dropdown-item>
                <el-dropdown-item  command="c"><span style="font-size: 12px">{{
                    $t("查看流量包明细")
                  }}</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown> -->
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="float: right;margin: 5px 0;" :page-size="page.pageSize" :total="total"
        layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
      </el-pagination>
    </el-card>
    <el-dialog :before-close="handleClose" :title="$t('编辑')" :visible.sync="dialogVisible" width="40%">
      <el-card>
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item :label="$t('编辑人员')">
            <el-input v-model="formInline.userId" :placeholder="$t('编辑人员')" disabled></el-input>
          </el-form-item>
          <!-- disabled -->
          <el-form-item :label="$t('充值金额')">
            <el-input v-model="formInline.amountFlow" :placeholder="$t('充值金额')"></el-input>
          </el-form-item>
          <el-form-item :label="$t('充值备注')">
            <el-input v-model="formInline.note" :placeholder="$t('充值备注')"></el-input>
          </el-form-item>
          <el-form-item :label="$t('状态')" style="display: block">
            <el-switch v-model="formInline.status" :active-value="1" :inactive-value="0" active-color="#13ce66"
              inactive-color="#cccccc" style="margin-left: 30px"></el-switch>
          </el-form-item>
        </el-form>
      </el-card>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">{{ $t('取消') }}</el-button>
        <el-button type="primary" @click="onSubmit">{{ $t('确定') }}</el-button>
      </span>
    </el-dialog>
    <el-dialog :before-close="defaultClose" :title="$t('用户增减CFP的明细')" :visible.sync="userDefaultdia" width="70%">
      <!-- <el-table v-loading="loadings" :data="userDetailTable" style="width: 100%">
        <el-table-column label="用户id" prop="userId"></el-table-column>
        <el-table-column label="购买流量总和GB" prop="flowAmountTotal"></el-table-column>
        <el-table-column label="未解锁流量总和GB" prop="flowLockTotal"></el-table-column>
        <el-table-column label="解锁总流量GB" prop="lowUnlockTotal"></el-table-column>
        <el-table-column label="解锁流量GB" prop="dayFlowUnlock"></el-table-column>
        <el-table-column label="转换金额CFP" prop="dayFlowAmount"></el-table-column>
        <el-table-column label="状态" prop="status">
          <template #default="{ row }">
            {{ row.status ? "有效" : "无效" }}
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="createTime"></el-table-column>
        <el-table-column label="创建人" prop="createBy"></el-table-column>
        <el-table-column label="更新时间" prop="updateTime"></el-table-column>
        <el-table-column label="更新人" prop="updateBy"></el-table-column>
      </el-table> -->
      <el-table v-loading="loadings" :data="userDetailTable" style="width: 100%">
        <el-table-column :label="$t('用户id')" prop="userId"></el-table-column>
        <el-table-column :label="$t('用户名称')" prop="userName">
        </el-table-column>
        <el-table-column :label="$t('收入金额')" prop="incomeAmount">
        </el-table-column>
        <el-table-column :label="$t('每日分红比例')" prop="rateId">
        </el-table-column>
        <el-table-column :label="$t('状态')" prop="statusName">
          <template #default="{ row }">
            {{ $t(`${row.statusName}`) }}
          </template>
        </el-table-column>
        <!-- <el-table-column prop="channelSource" :label="$t('渠道来源')">
        </el-table-column> -->
        <el-table-column :label="$t('渠道名称')" prop="channelName">
          <template #default="{ row }">
            {{ $t(`${row.channelName}`) }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('创建时间')" prop="createTime">
        </el-table-column>
      </el-table>
      <el-pagination :page-size="pages.pageSize" :total="detailtotal" layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange1" @current-change="handleCurrentChange1">
      </el-pagination>
    </el-dialog>
    <el-dialog :before-close="leveClose" :visible.sync="dialogLeve" :title="$t('修改等级')" width="30%">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item :label="$t('用户id')">
          <el-input v-model="userid" disabled :placeholder="$t('审批人')"></el-input>
        </el-form-item>
        <el-form-item :label="$t('等级列表')">
          <el-select v-model="leve">
            <el-option v-for="item in leveList" :key="item.value" :disabled="leve >= item.value" :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="leveClose">{{ $t('取消') }}</el-button>
        <el-button type="primary" @click="leveSubmit">{{ $t('确定') }}</el-button>
      </span>
    </el-dialog>
    <!-- <userFlowDetail ref="flow" :dialogFlow.sync="dialogFlow" :userid="userid"></userFlowDetail>
    <userFlowBagDetail ref="flowBag" :dialogFlowBag.sync="dialogFlowBag" :userid="userid"></userFlowBagDetail> -->
    <CFPbalance :userid="userid" :CfpDialog.sync="CfpDialog"></CFPbalance>
  </div>
</template>
<script>
import {
  getuserListApi,
  getusertopupApi,
  resetPasswordApi,
  editUserleveApi,
} from "@/api/appuser/userList";
import { getearningsDetailApi } from "../../../api/appuser/earningsDetail";
// import userFlowDetail from "./components/userFlowDetail.vue";
// import userFlowBagDetail from "./components/userFlowBagDetail.vue";
import CFPbalance from "./components/CFPbalance.vue";

export default {
  components: {
    // userFlowDetail,
    // userFlowBagDetail,
    CFPbalance
  },
  data() {
    return {
      tableData: [],
      loading: false,
      dialogVisible: false,
      formInline: {
        userId: "",
        amountFlow: "",
        note: "",
        status: "",
      },
      total: 0,
      page: {
        pageNum: 1,
        pageSize: 10,
      },
      formInline1: {
        userId: null,
        userName: null,
        status: null,
        createTime: null,
        userGrade: null,
      },
      userDefaultdia: false,
      userDetailTable: [],
      pages: {
        pageNum: 1,
        pageSize: 10,
      },
      detailtotal: 0,
      userid: null,
      leve: null,
      loadings: false,
      dialogFlowBag: false,
      dialogFlow: false,
      dialogLeve: false,
      leveList: [
        { label: "V1", value: 1 },
        { label: "V2", value: 2 },
        { label: "V3", value: 3 },
        { label: "V4", value: 4 },
        { label: "V5", value: 5 },
      ],
      CfpDialog: false
    };
  },
  created() {
    this.getuserList();
  },
  methods: {
    async getuserList() {
      this.loading = true;
      const res = await getuserListApi({
        ...this.page,
        ...this.formInline1,
      });
      this.tableData = res.list;
      this.total = res.total;
      this.loading = false;
    },
    topUp(id, status) {
      console.log(status);
      this.formInline.userId = id;
      this.formInline.status = status;
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
      this.formInline = {
        userId: "",
        amountFlow: "",
        note: "",
        status: "",
      };
    },
    async onSubmit() {
      if (this.formInline.amountFlow < 0) {
        return this.$message.error(this.$t("金额不能为负数"));
      }
      await getusertopupApi(this.formInline);
      this.$message.success(this.$t("编辑成功"));
      this.handleClose();
      this.getuserList();
    },
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.getuserList();
    },
    handleCurrentChange(val) {
      this.page.pageNum = val;
      this.getuserList();
    },
    //用户cfpdialog
    defaultClose() {
      this.userDefaultdia = false;
    },
    //查看用户CFp明细
    async checkDetail(id) {
      this.loadings = true;
      this.userDefaultdia = true;
      this.userid = id;
      const res = await getearningsDetailApi({
        pageNum: this.pages.pageNum,
        pageSize: this.pages.pageSize,
        userId: id,
      });
      console.log(res);
      this.userDetailTable = res.list;
      this.detailtotal = res.total;
      this.loadings = false;
    },
    handleSizeChange1(val) {
      this.pages.pageSize = val;
      checkDetail(this.userid);
    },
    handleCurrentChange1(val) {
      this.pages.pageNum = val;
      checkDetail(this.userid);
    },
    checkFlowDetail(id) {
      this.userid = id;
      this.dialogFlow = true;
      setTimeout(() => {
        this.$refs.flow.getflowdetail();
      }, 0);
    },
    checkFlowbagDetail(id) {
      this.userid = id;
      this.dialogFlowBag = true;
      setTimeout(() => {
        this.$refs.flowBag.getflowBagdetail();
      }, 0);
    },
    handleCommand(e, id) {
      switch (e) {
        case "a":
          this.checkDetail(id);
          break;
        case "b":
          this.checkFlowDetail(id);
          break;
        case "c":
          this.checkFlowbagDetail(id);
          break;
        default:
          break;
      }
    },
    reset(id) {
      this.$confirm(
        `${this.$t("是否重置")}"${id}"${this.$t("密码")}`,
        `${this.$t("提示")}`,
        {
          confirmButtonText: `${this.$t("确定")}`,
          cancelButtonText: `${this.$t("取消")}`,
          type: "warning",
        }
      )
        .then(async () => {
          await resetPasswordApi({ userId: id });
          this.$message({
            type: "success",
            message: this.$t("重置成功!"),
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: this.$t("已取消"),
          });
        });
    },
    alterLever(row) {
      this.userid = row.userId;
      this.leve = row.userGrade;
      this.dialogLeve = true;
    },
    leveClose() {
      this.dialogLeve = false;
    },
    async leveSubmit() {
      await editUserleveApi({
        userId: this.userid,
        userGrade: this.leve,
      });
      this.dialogLeve = false;
      this.$message.success(this.$t("修改成功"));
      this.getuserList();
    },

    onSubmit1() {
      console.log(this.formInline1);
      this.page = {
        pageNum: 1,
        pageSize: 10,
      };
      this.getuserList();
    },
    reset1() {
      this.page = {
        pageNum: 1,
        pageSize: 10,
      };
      this.formInline1 = {
        userId: null,
        userName: null,
        status: null,
        createTime: null,
      };
      this.getuserList();
    },

    //查看用户当天CFP余额
    chekCfp(id) {
      this.userid = id;
      this.CfpDialog = true;
    },
    CfpDialogFalse() {
      this.CfpDialog = false;
    },
  },
};
</script>
<style lang="" scoped></style>
